<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import card_back from '@/assets/card-back.png';
const { t } = useI18n();
const videoList = computed(() => {
  return [
    {
      videoUrl: 'd',
      banner: card_back,
      title: t('home.video.video_1'),
    },
    {
      videoUrl: 'd',
      banner: card_back,
      title: t('home.video.video_2'),
    },
    {
      videoUrl: 'd',
      banner: card_back,
      title: t('home.video.video_3'),
    },
  ];
});
</script>
<template>
  <ul class="video-list">
    <li class="video-list-item" v-for="(item, index) in videoList" :key="index">
      <a :href="item.videoUrl" class="link" target="_blank">
        <img class="cover" :src="item.banner" :alt="item.title" />
        <i class="btn"></i>
        <p class="title" :title="item.title">{{ item.title }}</p>
      </a>
    </li>
  </ul>
</template>
<style scoped lang="scss">
.video-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  position: relative;
  padding: 2px 0;
  &-item{
  .link{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--theme-card-bg);
    box-shadow: var(--theme-shadow);
    height: 100%;

    &:hover {
      background: var(--theme-card-hover);
      box-shadow: var(--theme-shadow-hover);
    }
    .cover{
      height: 254px;
      object-fit: cover;
      width: 100%;
    }
    .btn {
      width: 72px;
      height: 72px;
      background: url('../../assets/video-btn.png') no-repeat center/cover;
      transform: translate(-50%);
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .title {
      color: var(--theme-title);
      font-size: 14px;
      padding: 12px;
      line-height: 24px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 90%;
      text-align: center;
    }
    }
  }
}
</style>
